<template>
    <a-row v-if="this.headExtraColumns.length > 0" class="status-list">
      <template v-for="(item, index) in headExtraColumns">
        <a-col :xs="screenSize" :sm="screenSize">
          <div class="text">{{item.title}}</div>
          <div class="heading">{{item.prefix ? item.prefix + headContent[item.dataIndex] : headContent[item.dataIndex]}}</div>
        </a-col>
      </template>
    </a-row>
</template>

<script>

  export default {
    name: 'YqPageHeadExtra',
    components: {},
    created() {
    },
    data() {
      return {
        rowNum: 1
      }
    },
    props:{
      headContent:{},
      headExtraColumns: {
        type:Array,
        required:false,
        default:[]
      },
    },
    computed:{
      screenSize(){
        if(this.headExtraColumns.length === 0 || this.rowNum === 0){
          return 0;
        }else
          return Math.floor(24/Math.ceil(this.headExtraColumns.length/this.rowNum))
      }
    },
    methods: {
    }
  }
</script>

<style lang="less" scoped>
  .text {
    color: rgba(0, 0, 0, .45);
    text-align: center;
  }

  .heading {
    color: rgba(0, 0, 0, .85);
    font-size: 20px;
    text-align: center;
  }

</style>